<template>
  <div class="view-container">
    <div class="filter-container">
      <el-row :gutter="40" style="margin:0px;">
        <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
          <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
            <el-col :span="6">
              <el-form-item label="全部" style="width: 100%">
                <el-select v-model="queryParams.selectType" clearable style="width: 100%">
                  <el-option label="全部" value="0"/>
                  <el-option label="我负责的" value="1"/>
                  <el-option label="下级负责的" value="2"/>
                  <el-option label="我部门负责的" value="3"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="营销数据来源" style="width: 100%">
                <el-select v-model="queryParams.saleSource" clearable style="width: 100%">
                  <el-option :value="''" label="全部"/>
                  <el-option label="厂家配送订单" value="1"/>
                  <el-option label="商业流向记录" value="2"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="终端名称" style="width: 100%">
                <el-input v-model="queryParams.terminalName" clearable placeholder="终端名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="width: 100%">
                <more-search-btn v-model:is-more="visible"/>
                <el-button class="border-btn" @click="handlReset">重置</el-button>
                <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
            <template v-if="visible">
              <el-col :span="6">
                <el-form-item label="产品名称" style="width: 100%">
                  <el-input v-model="queryParams.productName" clearable placeholder="产品名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="渠道客户名称" style="width: 100%">
                  <el-input v-model="queryParams.agentName" clearable placeholder="渠道客户名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="配送商名称" style="width: 100%">
                  <el-input v-model="queryParams.distributeName" clearable placeholder="配送商名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关联单据号" style="width: 100%">
                  <el-input v-model="queryParams.relationNo" clearable placeholder="关联单据号"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="营销模式" style="width: 100%">
                  <el-select v-model="queryParams.agentType" placeholder="请选择营销模式" style="width: 100%">
                    <el-option v-for="item in agentTypeData" :key="item.id" :label="item.label" :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="负责营销职员" style="width: 100%">
                  <el-select v-model="queryParams.headId" placeholder="请选择营销职员" style="width: 100%">
                    <el-option v-for="item in headList" :key="item.id" :label="item.realName" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终端类型" style="width: 100%">
                  <el-select v-model="queryParams.terminalType" placeholder="请选择终端类型" style="width: 100%">
                    <el-option v-for="item in terminalData.filter(a=>a.value !== 'all')" :key="item.id"
                               :label="item.label" :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所在地区" style="width:100%">
                  <el-cascader v-model="queryParams.value" :options="cityList" :popper-append-to-body="false"
                               :props="{ value:'regionCode',label:'regionName' }" placeholder="请选择地区"
                               style="width:100%"
                               @change="handlCity"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="记账时间">
                  <date-range-picker v-model:date="value1" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期"
                                     type="daterange" @change="handlDate"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发货/配送时间">
                  <date-range-picker v-model:date="value2" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期"
                                     type="daterange" @change="handlDate1"/>
                </el-form-item>
              </el-col>

            </template>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <div class="main-content" style="padding-top: 0">
      <div class="list-container">
        <table-tools>
          <template #btn>
            <div style="display: flex; justify-content: flex-end">
              <table-cell-setting :checked="checkListData" :table-option="tableOption" @checkList="checkList"/>
            </div>
          </template>
        </table-tools>
        <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
                    @row-click="aloneClick" @sort-change="handlSort">
          <el-table-column v-if="checkListData.indexOf('deliveryTime') !== -1" :min-width="140" align="center"
                           fixed label="发货/配送日期" sortable="custom">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd", row.deliveryTime) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('terminalName') !== -1" :min-width="160" :show-overflow-tooltip="true"
                           fixed header-align="center" label="终端名称" prop="terminalName"/>

          <el-table-column v-if="checkListData.indexOf('terminalType') !== -1" :min-width="100" align="center"
                           label="终端类型">
            <template #default="{row}">
              {{ getLabel('app_mode', row.terminalType) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('provinceName') !== -1" :min-width="190" :show-overflow-tooltip="true"
                           header-align="center" label="终端所在地区">
            <template #default="{row}">
              {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('productPopularName') !== -1" :min-width="400" :show-overflow-tooltip="true"
                           header-align="center" label="产品信息">
            <template #default="{row}">
              {{ getProductName(row.productInfo) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('saleNum') !== -1" :min-width="100" align="center" label="营销数量"
                           prop="saleNum"/>

          <el-table-column v-if="checkListData.indexOf('sellUnit') !== -1" :min-width="100" align="center" label="计价单位"
                           prop="sellUnit">
            <template #default="{row}">
              {{ getLabel('sell_unit', row.sellUnit) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('terminalAmount') !== -1" :min-width="130" align="center"
                           label="终端价营销额(元)" prop="terminalAmount">
            <template #default="{row}">
              <div style="text-align: right">
                {{ isInteger(row.terminalAmount) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('returnAmount') !== -1" :min-width="120" align="center"
                           label="回款营销额(元)" prop="returnAmount">
            <template #default="{row}">
              <div style="text-align: right">
                {{ isInteger(row.returnAmount) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('agentName') !== -1" :min-width="160" :show-overflow-tooltip="true"
                           header-align="center" label="渠道客户名称" prop="agentName"/>

          <el-table-column v-if="checkListData.indexOf('agentType') !== -1" :min-width="120" align="center"
                           label="营销模式">
            <template #default="{row}">
              <div v-if="row.sellMode !== 'direct'">
                {{ row.agentAttribute === '1' ? '独家招商' : '精细招商' }}
              </div>
              <div v-else> 终端直销</div>
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('distributeName') !== -1" :min-width="160" :show-overflow-tooltip="true"
                           header-align="center" label="配送商" prop="distributeName">
            <template #default="{row}">
              <span v-if="row.saleSource === '1'">厂家配送</span>
              <span v-if="row.saleSource === '2'">{{ row.distributeName }}</span>
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('headName') !== -1" :min-width="120" align="center"
                           label="负责营销职员" prop="headName"/>

          <el-table-column v-if="checkListData.indexOf('createdAt') !== -1" :min-width="120" align="center" fixed="right"
                           label="记账日期" sortable="custom">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd", row.createdAt) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('saleSource') !== -1" :min-width="120" align="center"
                           fixed="right" label="营销数据来源">
            <template #default="{row}">
              <span v-if="row.saleSource === '1'">厂家配送订单</span>
              <span v-if="row.saleSource === '2'">商业流向记录</span>
            </template>
          </el-table-column>
          <el-table-column v-if="checkListData.indexOf('relationNo') !== -1" :min-width="180" align="center"
                           fixed="right" label="关联单据编号" prop="relationNo"/>
        </table-view>
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page"
                    :total="total" style="display: flex; justify-content: flex-end" @pagination="handlList"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";
import {crmStore} from "@CRM/store";
import area from "@/utils/area";

export default {
  name: "Index",
  setup() {
    const api = inject("api");
    const router = useRouter();
    // 搜索对象
    var data = reactive({
      queryParams: {
        distributeName: "",
        productName: "", //
        terminalName: "", // 终端名称
        saleSource: "", // 营销来源   1  厂家  2  配送商
        selectType: "0", // 1 我负责的   2 下级负责的  3 我部门负责的
        pageSize: 20,
        page: 1,
        value: [],
        provinceCode: [], // 省code
        cityCode: [], // 市code
        areaCode: [], // 区code
        deliveryTimeSort: "", // // 发货/配送时间排序
        createdSort: "", // 记账日期时间排序
        terminalType: "",
        agentName: "",
        agentType: "",
        headId: "",
        startTime: null,
        endTime: null,
        deliveryTimeStart: null,
        deliveryTimeEnd: null,
        relationNo: "",
        list_type: "2",
      },
      tableData: [],
      total: 0,
      tableOption: [
        {key: "deliveryTime", value: "下单/配送日期"},
        {key: "terminalName", value: "终端名称"},
        {key: "terminalType", value: "终端类型"},
        {key: "provinceName", value: "终端所在地区"},
        {key: "productPopularName", value: "产品信息"},
        {key: "saleNum", value: "营销数量"},
        {key: "sellUnit", value: "计价单位"},
        {key: "terminalAmount", value: "终端价营销额(元)"},
        {key: "returnAmount", value: "回款营销额"},
        {key: "agentType", value: "营销模式"},
        {key: "distributeName", value: "配送商"},
        {key: "headName", value: "负责营销职员"},
        {key: "createdAt", value: "记账日期"},
        {key: "saleSource", value: "营销数据来源"},
        {key: "relationNo", value: "关联单据编号"},
        {key: "agentName", value: "渠道客户名称"},
      ],
      checkListData: [
        "deliveryTime",
        "terminalName",
        "terminalType",
        "provinceName",
        "productPopularName",
        "saleNum",
        "sellUnit",
        "terminalAmount",
        "returnAmount",
        "agentType",
        "distributeName",
        "headName",
        "createdAt",
        "saleSource",
        "relationNo",
        "agentName",
      ],
      visible: false,
      terminalData: crmStore.getters["dictionary/getDictionary"]["app_mode"],
      agentTypeData: crmStore.getters["dictionary/getDictionary"]["agentType"],
      cityList: area,
      headList: [],
      value1: [],
      value2: [],
    });
    const currentInstance = getCurrentInstance();

    const checkList = (checked) => {
      data.checkListData = checked;
    };

    // 获取负责人
    const handlHead = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          data.headList = res.data;
        }
      });
    };

    const handlDate = (val) => {
      if (val) {
        data.queryParams.startTime = val[0];
        data.queryParams.endTime = val[1];
      }
    };

    const handlDate1 = (val) => {
      if (val) {
        data.queryParams.deliveryTimeStart = val[0];
        data.queryParams.deliveryTimeEnd = val[1];
      }
    };

    // 获取列表
    const handlList = () => {
      api.sellDetail.TSELLDETAIL_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    const handlCity = (val) => {
      if (val) {
        data.queryParams.provinceCode = [val[0]];
        data.queryParams.cityCode = [val[1]];
        data.queryParams.areaCode = [val[2]];
      }
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 重置
    const handlReset = () => {
      data.queryParams = {
        list_type: "2",
        productName: "", //
        terminalName: "", // 终端名称
        saleSource: "", // 营销来源   1  厂家  2  配送商
        selectType: "0", // 1 我负责的   2 下级负责的  3 我部门负责的
        pageSize: 20,
        page: 1,
        value: [],
        provinceCode: [], // 省code
        cityCode: [], // 市code
        areaCode: [], // 区code
        deliveryTimeSort: "", // // 发货/配送时间排序
        createdSort: "", // 记账日期时间排序
        terminalType: "",
        agentName: "",
        agentType: "",
        headId: "",
        distributeName: "",
        startTime: null,
        endTime: null,
        deliveryTimeStart: null,
        deliveryTimeEnd: null,
        relationNo: "",
      };
      data.value1 = [];
      data.value2 = [];
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        path: "/businessFlow/flowData/details",
        query: {id: row.id},
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "下单/配送日期") {
          switch (row.order) {
            case "ascending":
              data.queryParams.deliveryTimeSort = "asc";
              break;
            case "descending":
              data.queryParams.deliveryTimeSort = "desc";
              break;
          }
        }
        if (row.column.label === "记账日期") {
          switch (row.order) {
            case "ascending":
              data.queryParams.createdSort = "asc";
              break;
            case "descending":
              data.queryParams.createdSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    onMounted((_) => {
      handlList();
      handlHead();
    });

    return {
      ...toRefs(data),
      handlList,
      handlSearch,
      handlReset,
      aloneClick,
      cellStyle,
      checkList,
      handlSort,
      handlCity,
      handlHead,
      handlDate,
      handlDate1,
    };
  },
};
</script>

<style scoped>
</style>

